// 导入axios
import axios from 'axios'

// 因为modules是一个对象, 那么这里导出一个对象即可
export default {
    // 提高封闭性, 使用命名空间
    namespaced: true,
    state: {
        catagtory: [], // 分类导航栏
        currentCatagtory: '' // 当前高亮的分类
    },
    mutations: {
        // 更新分类导航栏
        // 参数1: 当前命名空间的state
        // 参数2: 载荷
        updateCatagtory(state, payload) {
            state.catagtory = payload
        },
        // 更新当前高亮的分类
        updateCurrentCatagtory(state, payload) {
            state.currentCatagtory = payload
        }
    },
    actions: {
        // 异步函数, 要写在actions
        // 获取分类数据
        async getCatagtory(context) { // actions的方法需要传入一个context参数
            // axios会自动包裹一层data, 也就是说将我们服务器返回的结果封装到了data对象.
            const { data: { data: { channels } } } = await axios({
                url: 'http://api-toutiao-web.itheima.net/app/v1_0/channels',
                method: 'GET'
            });
            // 将返回的数组, 通过mutations设置给state中的catagtory
            context.commit('updateCatagtory', channels) // 通过context的commit方法
            context.commit('updateCurrentCatagtory', channels[0].id) // 将数组第一个元素设置成高亮状态
        }
    }
}